<template>
  <div class="article-footer">
    <div class="article-footer-inner">
      <div class="input"  @click="slefOpenPopup" :style="{width:is_reply?'100%':'50%'}">写评论</div>
      <div class="icons" v-show="!is_reply">
        <!-- //  做一个校验是否登陆的函数  -->
      <van-icon name="comment" :badge="article.comment||''" />
      <van-icon name="star" @click="articleFavToggle"  :color="article.is_fav ? 'red' : ''"    />
        <van-icon   @click="articleLikeToggle"     :color="article.is_like ? 'red' : ''" name="good-job" />
      <van-icon name="share" />


      </div>
    </div>
   
<van-popup
  v-model="popupShow"
  closeable
  position="bottom"
  :style="{ height: '30%' }"
>

<div style="padding-top:15px"> 

  <van-field
  v-model.trim="content"
  rows="4"
  autosize
  type="textarea"
  :placeholder="placeholder"
  style="border:1px solid #eee"
  autofocus

/>

<van-button type="primary" size="large" @click="submit">发布</van-button>
</div>

</van-popup>



  </div>
</template>

<script>
import articleFooterMethods from './articleFooterMethods'
import { Popup,Field } from 'vant';

export default {
  name: "ArticleFooter",
  components:{
    [Popup.name]:Popup,
    [Field.name]:Field,
  },
  props: {
    article: {
      required: true,
    },
    user_id:{
      required: true
    },
    article_id:{
       required: true
    },
    placeholder:{
      default:'请输入留言',
      type:String
    },
    reply_comment_id:{
      default:'',
       type:String
    },
    comment_type:{
      default:0,
      type:[Number,String]
    },
    currentIndex:{
      default:0,
      type:[Number]
    },
    is_reply:{
      default:false
    }
  },
  data(){
    return {
      popupShow:false,
      content:''
    }
  },
    computed:{
       userInfo(){
             return this.$store.state.user.userInfo
       }
    },
  methods:{
        ...articleFooterMethods,
        slefOpenPopup(){
              this.popupShow = true;
               let parent = this.$parent;
               parent.placeholder = '请输入留言'
               parent.reply_comment_id = ''
               parent.comment_type = 0

        }

  }
};
</script>

<style lang="scss">
@mixin flex($m: center, $c: center,  ) {
  display: flex;
  justify-content: $m;
  align-items: $c;

  // flex-direction: $d;
}

.article-footer {
  width: 100%;
  height: 50px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  background: #fff;
  border-top: 1px solid #eee;
  .van-icon{
  color: #999;
}
}

.article-footer-inner {
  padding: 0 10px;
  height: 50px;

  @include flex(space-between,center );

  .input {
    width: 180px;
    height: 30px;
    border: 1px solid #999;
    border-radius: 20px;
    @include flex();
    color: #333;
  }
  .icons{

    flex:1;
    padding: 0 15px;
      @include flex(space-around);

  }
}

</style>
